<template>
  <div class="backgroundColor1 container fixed">
    <Header content="" :showBack="true"></Header>
    <scroller
      :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
      :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
      lock-x
      height="-45"
      ref="investDetail"
      @on-pullup-loading="onScrollBottom()"
      :use-pullup="true"
      :use-pulldown="true"
      @on-pulldown-loading="onScrollTop()"
    >
      <div>
        <div class="investDetail backgroundColor1">
          <div style="padding: 22px 15px 0 15px;">
            <div class="flex">
              <div class="flexLeft">
                <img
                  :src="agentDetail.areaicon"
                  alt=""
                  style="width: 22px;height: 22px;margin-right: 8px;">
                <div>
                  {{agentDetail.title}}第{{agentDetail.turns}}轮
                </div>
              </div>

              <div class="investDetailTime font13 flexLeft">
                <div>{{during| time('day')}}</div> <span> : </span>
                <div>{{during| time('hour')}}</div> <span> : </span>
                <div>{{during| time('min')}}</div> <span> : </span>
                <div>{{during| time('sec')}}</div>
                <span v-if="agentDetail.starttimestamp>agentDetail.nowtimestamp">开始</span>
                <span v-if="agentDetail.starttimestamp<agentDetail.nowtimestamp">截止</span>
              </div>
            </div>
            <div class="flex" style="margin-top: 26px;">
              <div class="center">
              <span style="color:#F5646E;" class="font16">
                {{agentDetail.rate}}<span class="font14">%</span></span><br>
                <span style="color:#BBBBC0" class="font12">预计利率</span>
              </div>
              <div class="center">
              <span style="color:#ffffff;" class="font16" v-if="agentDetail.raised || agentDetail.raised===0">
                {{agentDetail.total | sub(agentDetail.raised)}}
              </span><br>
                <span style="color:#BBBBC0" class="font12">本轮可捐<span>{{agentDetail.areamark}}</span></span>
              </div>
              <div class="center">
              <span style="color:#ffffff;" class="font16">
                {{agentDetail.raised}}/{{agentDetail.total}}</span><br>
                <span style="color:#BBBBC0" class="font12">进度<span>{{agentDetail.areamark}}</span></span>
              </div>
            </div>
          </div>
          <div style="margin: 15px 0;" v-if="agentDetail.total">
            <Progress :percent="agentDetail.raised | numDiv(agentDetail.total)"></Progress>
          </div>
        </div>
        <div style="background:#424252;padding:7px 15px;margin-bottom: 10px;">
          <div>
            <span class="font15">投资金额</span>
            <span class="font12">(可用{{agentDetail.isused}}{{agentDetail.areamark}})</span>
          </div>
          <group class="investDetailInput">
            <x-input
              name="username"
              :placeholder="'起投 '+ agentDetail.min +' '+agentDetail.areamark"
              class="font15"
              v-model="investValue"
              @on-change="inputValue"
              type="tel">
            <span
              slot="right"
              style="color:#F5646E;padding:3px 8px;border: 1px solid #F5646E;border-radius: 3px;"
              class="font14"
              @click="maxAmount">
              最大
            </span>
            </x-input>
          </group>
        </div>
        <!--<div class="flex" style="padding:7px 15px;background: #424252">-->
          <!--<div>-->
            <!--<span class="font15">自动复投</span>-->
            <!--<span class="font12">-->
            <!--（本轮本金投注额自动投入下一轮）-->
          <!--</span>-->
          <!--</div>-->
          <!--<inline-x-switch v-model="value"></inline-x-switch>-->
        <!--</div>-->
        <div style="margin: 26px 15px;">
          <x-button type="primary" @click.native="submit" :disabled="disabled">立即捐助</x-button>
        </div>
        <div style="padding:0 15px;">
          <div
            style="background: #FFFFFF;border-top-left-radius: 9px;border-top-right-radius:9px;box-sizing: border-box;color:#333333;">
            <div class="font18 flex" style="padding: 15px;border-bottom: 1px solid #DCDCDC;">
              <span>本期捐助</span>
              <span style="color:#647DFF;" @click="goTo({name:'donationRecord',params:{id:agentDetail.aid,mark:agentDetail.areamark}})">查看历史></span>
            </div>
            <div class="font15 flex" style="padding: 15px;" v-for="item in record">
              <div>
                <div style="color:#333333;" class="font15">
                  第{{item.turns}}轮捐助 {{item.paycoin}}{{item.areamark}}
                </div>
                <div style="color:#999999;" class="font12">
                  {{item.inputtime}}
                </div>
              </div>
              <div
                :class="{'red':item.state === 1 || item.state === 2,'green':item.state === 0,'black':item.state === 3}"
                class="font15"
                v-if="item.state||item.state === 0">
                {{item.state | stateInvest}}
                <span v-if="item.state === 2 || item.state === 3">
                  {{item.paycoin_back}}{{item.areamark}}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div style="background: #ffffff;margin: 15px;border-top-left-radius: 9px;border-top-right-radius:9px;" v-if="items.length>0">
          <News :items="items"></News>
        </div>
        <div style="height: 1px;">

        </div>
        <ExchangePwd
          :showDialogStyle="showDialogStyle"
          @close="close">
          <div class="center">
            确认本轮投注{{investValue}}{{agentDetail.areamark}}
          </div>
          <group class="login" style="margin-top: 10px;">
            <x-input placeholder="请输入交易密码" style="background: #ffffff;" class="font14" v-model="pwd" :max="6" type="password"></x-input>
          </group>
          <div style="margin: 11px 0 10px;" class="login">
            <x-button type="primary" :disabled="Disabled" @click.native="buy">捐助</x-button>
          </div>
        </ExchangePwd>
      </div>
    </scroller>
  </div>
</template>
<script>
  import Header from './common/header.vue'
  import Progress from './common/progress.vue'
  import ExchangePwd from './common/exchangePwd.vue'
  import News from './common/news.vue'
  import {InlineXSwitch,XInput,Group,Scroller} from 'vux'
  export default{
    data(){
      return {
        agentDetail:{},
        value:false,
        disabled:false,
        tradepwd:'',
        paycoin:'',
        during:0,
        timerDuring:null,
        record:[],
        investValue:'',
        showDialogStyle:false,
        Disabled:false,
        pwd:'',
        onFetching1:false,
        onFetching:false,
        items:[],
      }
    },
    beforeRouteLeave(to,from,next){
      clearInterval(this.timerDuring);
      next()
    },
    methods:{
      onScrollTop(){
        if (this.onFetching1) {} else {
          this.onFetching1 = true;
          this.showinfo();
        }
      },
      onScrollBottom () {
        if (this.onFetching) {} else {
          this.$nextTick(() => {
            this.$refs.investDetail.donePulldown();
            this.$refs.investDetail.disablePullup();
          })
          this.onFetching = false;
          this.onFetching1 = false;
        }
      },
      inputValue(value){
        if(Number(value) > (this.agentDetail.isused)){
          this.$nextTick(()=>{
            this.investValue = this.agentDetail.isused;
          })
        }else{
          var arr = String(value).split('.');
          if(arr[1]){
            var value1 = arr[0] + '.' + arr[1].substring(0,this.agentDetail['accuracy']);
            this.$nextTick(()=>{
              this.investValue = value1;
            })
          }
        }
      },
      buy(){
        if(!this.investValue){
          this.toastFn('请填写金额');
          return
        }
//        else if(!this.pwd){
//          this.toastFn('请填写密码');
//          return;
//        }
        this.disabled = true;
        this.service('tradeorder',{
          id:this.agentDetail.iid,
          paycoin:this.investValue,
          tradepwd:this.pwd,
          repay:this.value?'1':'0'
        },'post').then(res=>{
          this.disabled = false;
          if(res.code == 200){
//            this.showDialogStyle = false;
//            this.pwd = '';
            this.$nextTick(()=>{
              this.investValue = '';
            })

            this.$store.dispatch('info');
            this.showinfo();
            this.toastFn(res.msg,'','success');
          }else{
            this.toastFn(res.msg);
          }
        })
      },
      close(){
        this.pwd = '';
        this.showDialogStyle = false
      },
      maxAmount(){
        if(this.agentDetail.max>this.agentDetail.isused){
          this.investValue = this.agentDetail.isused;
        }else{
          this.investValue = this.agentDetail.max;
        }
      },
      submit(){
        if(this.agentDetail.starttimestamp>this.agentDetail.nowtimestamp && this.during>0){
          this.toastFn('未到开始投注时间');
          return
        }
        if(this.agentDetail.total<=this.agentDetail.raised){
          this.toastFn('筹集金额已满');
          return
        }
        if(this.agentDetail.nowtimestamp>this.agentDetail.endtimestamp && this.during<=0){
          this.toastFn('筹集时间已过');
          return
        }
        if(!this.investValue){
          this.toastFn('请输入金额');
          return
        }
//        this.showDialogStyle = true;
        this.buy();
      },
      goTo(path){
        this.$router.push(path)
      },
      showinfo(){
        clearInterval(this.timerDuring);
        this.service('showinfo',{
          id:this.$route.params.id
        },'post').then(res=>{
          this.items = res.data.user_list;
          this.agentDetail = res.data.info;
          this.record = res.data.record;
          if(res.data.info.starttimestamp > res.data.info.nowtimestamp){
            this.during = res.data.info.starttimestamp - res.data.info.nowtimestamp;
          }else{
            this.during = res.data.info.endtimestamp - res.data.info.nowtimestamp;
          }
          this.timerDuring = setInterval(res=>{
            this.during--;
            if(this.during < 0){
              this.showinfo();
            }
          },1000)
          this.$nextTick(() => {
            this.$refs.investDetail.donePulldown();
            this.$refs.investDetail.disablePullup();
          })
          this.onFetching = false;
          this.onFetching1 = false;

        })
      },
    },
    created(){
      this.onScrollTop()
    },
    components:{
      Header,Progress,InlineXSwitch,XInput,Group,ExchangePwd,Scroller,News
    }
  }
</script>
<style>
  .investDetailTime>div{
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
    color:#ffffff;
    background: #444454;
    text-align: center;
  }
  .weui-switch:before{
    background-color:#424252!important;
  }
  .weui-switch{
    border:1px solid rgba(0,0,0,0.1)!important;
  }
  .investDetailInput .weui-cell{
    padding-left:0px;
    padding-right: 10px;
    background: #424252;
    height: 40px;
    box-sizing: border-box;
    margin-bottom: 0;
  }
  .investDetailInput .weui-label{
    color: #8E8F97;
    font-size: 14px;
  }
  .investDetailInput .weui-cells{
    background: none;
    margin-top:0
  }
  .investDetailInput .weui-cells:before,.investDetailInput .weui-cells:after{
    border: none;
  }
  .red{
    color:#F5646E;
  }
  .green{
    color:#14BE75;
  }
  .black{
    color:#333333;
  }
</style>
